<script setup>
import { reactive,onMounted ,onBeforeUnmount,h} from 'vue'
import { ref } from 'vue';
import { useRouter,useRoute} from 'vue-router'
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    DataZoomComponent,
    LegendComponent,
    DatasetComponent,
    VisualMapComponent,
    MarkLineComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DataZoomComponent,
    MarkLineComponent,
    LineChart,
    DatasetComponent,
    CanvasRenderer,
    VisualMapComponent,
    UniversalTransition
]);

const router = useRouter()
const route = useRoute()
const toNewTab = ()=>{
    router.push({ name: 'NewTab' })
}
const open = ref(false);
const showModal = () => {
  open.value = true;
};

const handleOk = (e) => {
  console.log(e);
  open.value = false;
};

const EchartLoad = (dateSet,errAcrive) => {

    let myChart = echarts.init(document.getElementById("echart_use"));
    myChart.clear();
   
    let option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
            }
        ]
    }
    myChart.setOption(option);
    window.onresize = myChart.resize;
}

onMounted(() => {
    EchartLoad()

})
</script>

<template >

    <div>
        <a-button type="primary" ghost @click="showModal">弹框</a-button>
        <a-button type="primary" ghost @click="toNewTab">跳转3</a-button>
        <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </a-modal>
        <h1>💖 Hello World!</h1>
         <p>Welcome to your Electron application.</p>
         <div id="echart_use" style=" width: 500px;height: 300px;"></div>
    </div>
</template>